<template>
	<view class="page" :style="loading ? 'opacity: 0;' : 'opacity: 1;'">
		<!-- <image src="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/top-bg.png" class="bg-color"
			mode="aspectFill"></image> -->
		<!-- 
			:bg-color="scrollTop > 100 ? 'rgba(255,255,255,1)' : 'rgba(255,255,255,0)'" -->
		<!--  @scroll="pagScroll" -->
		<z-paging ref="paging" refresher-only @onRefresh="onRefresh" bg-color="#F8F8F8">
			<!-- 之后-vue3 -->
			<template #top>
				<uv-navbar @leftClick="changeUser" bgColor="#fff" leftIcon="" :fixed="false" title="华之宇">
					<template v-slot:left>
						<!-- <uv-image v-if="userInfo.image" width="70rpx" height="70rpx" :src="userInfo.image" shape="circle"></uv-image> -->
					</template>
				</uv-navbar>
			</template>
			<block #refresher="{ refresherStatus }">
				<custom-refresher :status="refresherStatus" />
			</block>
			<view class="padidng-box">
				<view class="user-data-box">
					<image src="../../static/image/index-user.png" class="user-bg"></image>
					<view class="user-data-box-data">
						<image :src="userInfo.image" mode="aspectFill" class="user-data-box-data-avater"></image>
						<view class="user-data-box-data-content">
							<view class="user-data-box-data-content-name">
								{{ userInfo.name }}
								<text class="tips">{{ userInfo.position }}</text>
							</view>
							<view class="user-data-box-data-content-desc">{{ timeValStr }}</view>
							<view class="user-data-box-data-content-btn-box">
								<uv-button
									@click="goToLogin"
									v-if="userInfo.empower == 0"
									text="去登录"
									:customTextStyle="{ fontWeight: '400', fontSize: '26rpx', color: '#FFFFFF' }"
									:customStyle="{ width: '144rpx', height: '60rpx', background: '#143AAE', borderRadius: '8rpx', border: 'none' }"
								></uv-button>
								<uv-button
									v-if="userInfo.empower != 0"
									text="修改密码"
									:customTextStyle="{ fontWeight: '400', fontSize: '26rpx', color: '#FFFFFF' }"
									:customStyle="{ width: '144rpx', height: '60rpx', background: '#143AAE', borderRadius: '8rpx', border: 'none' }"
								></uv-button>
								<uv-button
									v-if="userInfo.empower != 0"
									@click="loginOut"
									text="退出登录"
									:customTextStyle="{ fontWeight: '400', fontSize: '26rpx', color: '#FFFFFF' }"
									:customStyle="{ width: '144rpx', height: '60rpx', background: '#143AAE', borderRadius: '8rpx', border: 'none' }"
								></uv-button>
							</view>
						</view>
					</view>
				</view>
				<view class="object-item-box">
					<view class="object-item-box-left">
						<image class="object-item-box-left-bg" src="../../static/image/xmlb.png"></image>
						<image class="object-item-box-left-icon" src="../../static/image/xmlb-icon.png"></image>
						<text class="object-item-box-left-txt">项目列表</text>
					</view>
					<view class="object-item-box-right">
						<view class="object-item-box-right-item">
							<image class="object-item-box-right-item-bg" src="../../static/image/zjxlb.png"></image>
							<text class="object-item-box-right-item-txt">增减项列表</text>
							<image class="object-item-box-right-item-icon" src="../../static/image/zjxlb-icon.png"></image>
						</view>
						<view class="object-item-box-right-item">
							<image class="object-item-box-right-item-bg" src="../../static/image/shlb.png"></image>
							<text class="object-item-box-right-item-txt">售后列表</text>
							<image class="object-item-box-right-item-icon" src="../../static/image/shlb-icon.png" style="margin-left: 40rpx"></image>
						</view>
					</view>
				</view>
				<view class="list-tile-box">
					<view class="list-tile-box-title">代办列表</view>
					<view class="tab-box">
						<uv-tabs
							lineColor="#3B75FF"
							:inactiveStyle="{ fontWeight: '400', fontSize: '28rpx', color: '#1B2431' }"
							:activeStyle="{ fontWeight: '400', fontSize: '28rpx', color: '#3B75FF' }"
							:list="tabList"
							@click="tabClickFunc"
							:scrollable="false"
						></uv-tabs>
					</view>
				</view>
				<template>
					<view class="list-box-box">
						<view class="list-item" v-for="(item, index) in 10" :key="index" @click="navToDetail('info', item.id)">
							<view class="list-item-title">
								<view class="title-box">{{ item.project_name || '待完善' }}</view>
								<block>
									<view class="tips-box" v-if="item.display_status == 10">待启动</view>
									<view class="tips-box" v-if="item.display_status == 15">待勘场</view>
									<view class="tips-box" v-if="item.display_status == 18">待勘场出图</view>
									<view class="tips-box" v-if="item.display_status == 20">待方案设计</view>
									<view class="tips-box" v-if="item.display_status == 25">待报价</view>
									<view class="tips-box" v-if="item.display_status == 30">洽谈中</view>
									<view class="tips-box" v-if="item.display_status == 40">已签约</view>
									<view class="tips-box" v-if="item.display_status == 45">施工中</view>
									<view class="tips-box" v-if="item.display_status == 50">已完工</view>
									<view class="tips-box" v-if="item.display_status == 55">待结算</view>
									<view class="tips-box" v-if="item.display_status == 60">款项付清</view>
									<view class="tips-box" v-if="item.display_status == 70">项目取消</view>
								</block>
							</view>
							<view class="list-item-data">
								<view class="list-item-data-lable-box">
									<view class="list-item-data-lable">{{ item.brand_name }}</view>
									<!-- <view class="list-item-data-lable_">新装修</view> -->
								</view>
								<view class="list-item-data-item">项目编号: {{ item.project_number || '暂无' }}</view>
								<view class="list-item-data-item">地址: {{ item.area + item.address }}</view>
								<view class="list-item-data-item">创建时间: {{ item.created_at }}</view>
							</view>
							<!-- <view class="list-item-btn">
											<uv-button text="上传设计图"></uv-button>
											<uv-button text="项目取消"></uv-button>
										</view> -->
						</view>
					</view>
				</template>
			</view>
			<template #bottom>
				<tabbar></tabbar>
			</template>
		</z-paging>
	</view>
	<!-- 视频预览 -->
	<preVideo :show="preVideoShow" :currVideo="currVideo" @close="maskClick"></preVideo>
	<!-- 用户信息 -->
	<uv-popup ref="popup" round="10">
		<view class="userdata-box">
			<view class="avater-box">
				<uv-image v-if="userInfo.image" width="140rpx" height="140rpx" :src="userInfo.image" shape="circle"></uv-image>
			</view>
			<view class="userdata-item">
				<view class="title">昵称</view>
				<view class="content">{{ userInfo.name }}</view>
			</view>
			<view class="userdata-item">
				<view class="title">身份</view>
				<view class="content">{{ userInfo.position }}</view>
			</view>
			<view class="userdata-item">
				<view class="title">手机号</view>
				<view class="content">{{ userInfo.phone }}</view>
			</view>
			<view class="userdata-item">
				<view class="title">归属地</view>
				<view class="content">{{ userInfo.area }}</view>
			</view>
		</view>
		<uv-button
			type="primary"
			text="退出登录"
			@click="loginOut"
			customTextStyle="font-weight: 400;font-size: 32rpx;color: #FFFFFF;"
			customStyle="width: calc(100% - 75rpx);height: 100rpx;background: #3B75FF;border-radius: 16rpx;margin:10rpx 75rpx;margin-bottom:30rpx;"
		></uv-button>
	</uv-popup>
</template>

<script setup>
import { ref, reactive, toRefs, toRef, getCurrentInstance, onMounted } from 'vue';
import { onShow, onLoad, onPageScroll, onUnload, onHide } from '@dcloudio/uni-app';
const { proxy: that } = getCurrentInstance();
onLoad((e) => {});
let timeValStr = ref(null);
const getTimeFunc = () => {
	const now = new Date();
	const year = now.getFullYear();
	const month = now.getMonth() + 1 < 10 ? '0' + now.getMonth() + 1 : now.getMonth() + 1;
	const day = now.getDate() < 10 ? '0' + now.getDate() : now.getDate();
	const hour = now.getHours() < 10 ? '0' + now.getHours() : now.getHours();
	const minute = now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes();
	const second = now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds();
	let weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
	let currentWeekDay = weekDays[now.getDay()];
	timeValStr.value = `${year}-${month}-${day} ${hour}:${minute}:${second} ${currentWeekDay}`;
};
let interVal = null;
onShow(() => {
	console.log('页面显示执行');
	setTimeout(() => {
		data.loading = false;
	}, 200);
	data.userInfo = uni.getStorageSync('userInfo');
	interVal = setInterval(() => {
		// console.log('首页时间');
		getTimeFunc();
	}, 1000);
});
onUnload(() => {
	clearInterval(interVal);
});
onHide(() => {
	clearInterval(interVal);
});
onPageScroll((e) => {
	console.log(e);
});
const data = reactive({
	userInfo: '',
	dataList: [],
	loading: true,
	currVideo: '',
	preVideoShow: false,
	userInfo: {},
	tabList: [
		{
			name: '项目',
			id: 1
		},
		{
			name: '增减项',
			id: 2
		},
		{
			name: '售后',
			id: 3
		}
	],
	tabClickFunc(e) {
		console.log(e);
	}
});
let { dataList, swiperList, pagScroll, scrollTop, loading, navToMore, introduction, currVideo, preVideoShow, userInfo, tabList, tabClickFunc } = toRefs(data);
// 下拉刷新

const changeUser = () => {
	that.$refs.popup.open('center');
};

const loginOut = () => {
	that.$refs.popup.close();
	uni.showModal({
		title: '提示',
		content: '此操作将退出当前账号,是否继续?',
		showCancel: true,
		success(res) {
			if (res.confirm) {
				loginOutQr();
			}
		}
	});
};

// 确认解绑
const loginOutQr = () => {
	uni.showLoading({
		mask: true
	});
	that.$Api
		.wxUnbind()
		.then((res) => {
			console.log(res, '解绑');
			uni.hideLoading();
			if (res.code == 200) {
				uni.showToast({
					title: '解绑成功~',
					mask: true
				});
				uni.clearStorage();
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/block/block'
					});
				}, 500);
			} else {
				uni.showToast({
					title: res.message,
					icon: 'error'
				});
			}
		})
		.catch((err) => {
			uni.hideLoading();
			uni.showToast({
				title: err.message,
				icon: 'error'
			});
		});
};

const onRefresh = () => {
	// wxHomepageData();
};
// 案例文件预览
const preFile = (item) => {
	console.log(item, '');
	if (item.file_type == 1) {
		// 图片
		let urls = [];
		item.case_list.forEach((file) => {
			urls.push(file.file_url);
		});
		uni.previewImage({
			urls
		});
	} else {
		data.preVideoShow = true;
		data.currVideo = item.case_list[0].file_url;
	}
};
// 关闭
const maskClick = () => {
	data.preVideoShow = false;
	data.currVideo = '';
};
const goToLogin = () => {
	uni.navigateTo({
		url: '/pagesA/login/login'
	});
};
</script>

<style lang="scss" scoped>
.page {
	transition: all 0.2s;
	opacity: 0;
}

.padidng-box {
	width: 100%;
	padding: 20rpx 32rpx;
	box-sizing: border-box;
	.user-data-box {
		width: 100%;
		height: 272rpx;
		position: relative;
		.user-bg {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}
		.user-data-box-data {
			width: 100%;
			height: 100%;
			position: relative;
			z-index: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			.user-data-box-data-avater {
				width: 124rpx;
				height: 124rpx;
				border: 4rpx solid #ffffff;
				border-radius: 50%;
				margin-right: 40rpx;
			}
			.user-data-box-data-content {
				background-color: rgba(0, 0, 0, 0);
				.user-data-box-data-content-name {
					display: flex;
					align-items: flex-end;
					font-weight: 600;
					font-size: 36rpx;
					color: #ffffff;
					margin-bottom: 10rpx;
					.tips {
						font-weight: 400;
						font-size: 28rpx;
						color: #ffffff;
						margin-left: 10rpx;
					}
				}
				.user-data-box-data-content-desc {
					font-weight: 400;
					font-size: 28rpx;
					color: #ffffff;
					margin-bottom: 10rpx;
				}
				.user-data-box-data-content-btn-box {
					display: flex;
					align-items: center;
					::v-deep .uv-button-wrapper {
						margin-right: 20rpx;
					}
				}
			}
		}
	}
	.object-item-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 30rpx 0;
		.object-item-box-left {
			width: 350rpx;
			height: 310rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;
			.object-item-box-left-bg {
				width: 350rpx;
				height: 310rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
			.object-item-box-left-icon {
				width: 130rpx;
				height: 124rpx;
				margin-bottom: 10rpx;
				position: relative;
				z-index: 9;
			}
			.object-item-box-left-txt {
				font-weight: 500;
				font-size: 36rpx;
				color: #ffffff;
				position: relative;
				z-index: 9;
			}
		}
		.object-item-box-right {
			width: 326rpx;
			height: 310rpx;
			.object-item-box-right-item {
				width: 100%;
				margin-bottom: 20rpx;
				height: 146rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				&:last-child {
					margin-bottom: 0;
				}
				.object-item-box-right-item-bg {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}
				.object-item-box-right-item-icon {
					position: relative;
					z-index: 9;
					width: 80rpx;
					height: 80rpx;
					margin-left: 20rpx;
				}
				.object-item-box-right-item-txt {
					font-weight: 500;
					font-size: 28rpx;
					color: #ffffff;
					position: relative;
					z-index: 9;
				}
			}
		}
	}
	.list-tile-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 34rpx;
		.list-tile-box-title {
			font-weight: 600;
			font-size: 32rpx;
			color: #000000;
		}
		.tab-box {
			width: 410rpx;
		}
	}
	// 列表
	.list-box-box {
		width: 100%;
		// 销售/施工
		.list-item {
			width: 100%;
			background: #ffffff;
			border-radius: 16rpx;
			padding: 26rpx 0;
			box-sizing: border-box;
			margin-bottom: 36rpx;

			.list-item-title {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title-box {
					font-weight: 600;
					font-size: 32rpx;
					color: #000000;
					position: relative;
					padding-left: 32rpx;

					&::after {
						content: '';
						position: absolute;
						top: 50%;
						left: 0;
						transform: translate(0, -50%);
						width: 8rpx;
						height: 28rpx;
						background: #408efe;
					}
				}

				.tips-box {
					display: inline-block;
					height: 46rpx;
					background: #408efe;
					border-radius: 24rpx 0rpx 0rpx 24rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #ffffff;
					padding: 0 22rpx;
					box-sizing: border-box;
					line-height: 46rpx;
				}
			}

			.list-item-data {
				width: 100%;
				padding: 18rpx 34rpx 0;
				box-sizing: border-box;

				.list-item-data-lable-box {
					width: 100%;
					display: flex;
					align-items: center;

					.list-item-data-lable {
						font-weight: 400;
						font-size: 24rpx;
						color: #408efe;
						padding: 4rpx 16rpx;
						background: #ecf5ff;
						border-radius: 4rpx;
						border: 2rpx solid #d9ecff;
						margin: 0 18rpx 20rpx 0;
					}

					.list-item-data-lable_ {
						font-weight: 400;
						font-size: 24rpx;
						color: #909399;
						padding: 4rpx 16rpx;
						background: #f4f4f5;
						border-radius: 4rpx;
						border: 2rpx solid #e9e9eb;
						margin: 0 18rpx 20rpx 0;
					}
				}

				.list-item-data-item {
					font-weight: 400;
					font-size: 24rpx;
					color: #828282;
					margin-bottom: 18rpx;
					&:last-child {
						margin-bottom: 0;
					}
				}
			}

			.list-item-btn {
				width: 100%;
				display: flex;
				flex-direction: row-reverse;
				padding-right: 22rpx;
				box-sizing: border-box;

				::v-deep .uv-button-wrapper {
					margin-left: 12rpx;
				}

				::v-deep .uv-button {
					font-weight: 400;
					display: inline-block;
					line-height: 60rpx;
					font-size: 24rpx;
					color: #8f8f8f;
					height: 60rpx !important;
					background: #ffffff !important;
					border-radius: 8rpx !important;
					border: 2rpx solid #e3e3e3 !important;
				}
			}
		}
	}
}

.video-pre {
	width: 100vw;
	height: 40vh;
}

::v-deep .uv-status-bar {
	transition: all 0.2s;
}

::v-deep .uv-navbar__content {
	transition: all 0.2s;
}

::v-deep .z-paging-content {
	transition: all 0.2s;
}

.userdata-box {
	width: 700rpx;
	padding: 40rpx;
	box-sizing: border-box;

	.avater-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
	}

	.userdata-item {
		width: 100%;
		border-bottom: 2rpx solid #f5f5f5;
		height: 124rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title {
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
		}

		.content {
			font-weight: 400;
			font-size: 30rpx;
			color: #36373d;
		}

		.code {
			height: 124rpx;
			width: 400rpx;
			text-align: right;
		}
	}
}
</style>
